<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			div {
				width: 100px;
				height: 100px;
				background-color: blue;
			}
			/*水平居中*/
			
			.div02 {
				/*水平居中，一般用于自己独立，不受其他标签影响的时候用。*/
				/*margin: 0px auto;*/
				/*绝对定位*/
				position: absolute;
				/*类似margin.但是必须要和position属性配合使用*/
				/*百分比，对应的是父元素50%*/
				left: 50%;
				top: 0;
				/*百分比，对应的是自身的50%*/
				/*平移*/
				transform: translate(-50%, 0);
				/*transform: translateX(-50%);*/
			}
			/*右上*/
			
			.div03 {
				position: absolute;
				top: 0;
				right: 0;
				/*left: 100%;
				transform: translateX(-100%);*/
			}
			/*左中*/
			
			.div04 {
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
			/*正中*/
			
			.div05 {
				position: absolute;
				left: 50%;
				top: 50%;
				/*transform: translateX(-50%) translateY(-50%)  ;*/
				transform: translate(-50%, -50%);
			}
			/*右中*/
			
			.div06 {
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
			}
			/*右下*/
			
			.div07 {
				position: absolute;
				bottom: 0;
				left: 0;
			}
			/*下中*/
			.div08 {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
			/*下右*/
			.div09 {
				position: absolute;
				bottom: 0;
				right: 0;
			}
		</style>
	</head>

	<body>
		<div class="div01">
		</div>
		<div class="div02">
		</div>
		<div class="div03">
		</div>
		<div class="div04">
		</div>
		<div class="div05">
		</div>
		<div class="div06">
		</div>
		<div class="div07">
		</div>
		<div class="div08">
		</div>
		<div class="div09">
		</div>

	</body>

</html>